<template>
	<view class="acinfo">
		<view style="background-color: #FFFFFF;height: 180px;">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="(item,index) in formData.atlas">
					<image class="img" :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="acinfo-header">
			<view class="ac-title">{{formData.title}}</view>
			<view class="fenxi">
				<image src="../../static/images/fenxiang.png"></image>
				<button class="btn activ-share-but" open-type="share" style="padding: 0;margin: 0;">
					<text style="padding-left: 5px;">分享</text>
				</button>
			</view>
			<view class="ac-main">{{formData.subtitle}}</view>
			<view class="ac-warapper">
				<view class="ac-num">
					<view style="font-size: 12px;color: #FF5F49;">￥{{formData.price}}</view>
					<view class="num-user">会员￥{{parseFloat(formData.vip_price)}}</view>
					<view style="font-size: 12px;color: #999999;text-decoration:line-through">原价￥{{formData.orig_price}}</view>
				</view>
				<view class="ac-surplus">剩余
					<text style="color: #FF5F49;">{{formData.total-formData.num}}</text>人</view>
			</view>
		</view>
		<view class="inte">
			<view class="inte-content">
				<view class="inte-text">积分</view>
				<view class="inte-num">报名可得{{formData.integral}}积分</view>
			</view>
		</view>
		<view class="swich">
			<view class="title-info">活动详情</view>
			<view>
				<view class="swi-wrapper">
					<view class="swi-add">
						<view class="add-con">
							<image src="../../static/images/dingwei.png"></image>
							<view class="add-text">{{formData.address}}</view>
						</view>
						<view class="add-but" @click="hlandMap(formData)">导航</view>
					</view>
					<view class="swi-add">
						<view class="add-con">
							<image src="../../static/images/dianhua.png" style="width: 18px;"></image>
							<view class="add-text">{{formData.tel}}</view>
						</view>
						<view class="add-but" @click="hanldCall(formData)">拨打</view>
					</view>
					<view class="swi-add">
						<view class="add-con">
							<image src="../../static/images/youxiao.png" style="width: 18px;"></image>
							<view class="add-text" style="color: #FF5F49;font-size: 14px;">报名时间：{{formData.start_date}}至{{formData.end_date}}</view>
						</view>
					</view>
					<view class="swi-add">
						<view class="add-con">
							<image src="../../static/images/youxiao.png" style="width: 18px;"></image>
							<view class="add-text" style="color: #FF5F49;font-size: 14px;">活动时间：{{formData.act_start_date}}至{{formData.act_end_date}}</view>
						</view>
					</view>
				</view>

				<view class="print" style="padding: 0 17px;">
					<view class="print-text">图文详情</view>
					<!-- <view class="print-main">参加活动时需要注意事项</view> -->
					<view>
						<jyf-parser :html="formData.content"></jyf-parser>
					</view>
				</view>


				<view class="sig" v-if="joinList!=''">
					<view class="signup" @click="hanldToRegis()">
						<view class="sig-text">已报名（{{msgNumber}}）</view>
						<image src="../../static/images/left.png" style="width: 9px;height: 12px;"></image>
					</view>
					<view class="sig-img">
						<view class="sig-con" v-for="(item,index) in joinList" v-if="index<6" :key="index">
							<image :src="item.avatar"></image>
							<text style="font-size: 12px;color: #999999;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 50px;text-align: center; ">{{item.nickname}}</text>
						</view>

					</view>
				</view>


			</view>
		</view>
		<view class="ativ-but">
			<view class="ativ-item">
				<button class="btn activ-share-but" open-type="share">
					<image src="../../static/images/fenxiang.png" style="width: 17px;height: 20px;"></image>
					<text class="ac-text">转发</text>
				</button>
			</view>
			<view class="ativ-item" @click="hanldCollect(formData.id)">
				<image src="../../static/images/shoucang_yes.png" style="width: 20px;height: 19px;" v-if="isfav"></image>
				<image src="../../static/images/shouchang_no.png" style="width: 20px;height: 19px;" v-if="!isfav"></image>

				<view v-if="!isfav" class="ac-text">收藏</view>
				<view v-if="isfav" class="ac-text">已收藏</view>
			</view>
			<view class="ac-once-but" v-if="formData.end_time<time" style="background-color: #DBDBDB;color: #FFFFFF;">报名已结束</view>
			<view class="ac-once-but" v-else-if="join" style="background-color: #DBDBDB;color: #FFFFFF;">已报名</view>
			<view class="ac-once-but" v-else @click="hanldToapply()">立即报名</view>
		</view>
<uni-popup ref="popuphy" type="center" :maskClick="false">
			<view class="huany">
				<view style="text-align: center;color: #333333;font-size: 14px;padding: 15px 0;font-weight: bold;">温馨提示</view>
				<view style="padding: 0 10px;text-align: center;">您暂未开通理想嘉年卡！</view>
				<view style="padding: 0 10px;text-align: center;">开通理想嘉会员年卡，尊享全年超值服务</view>
				
				<view class="but-huany">
					<view class="but-qu" @click="hanldActNO()">取消</view>
					<view class="but-ok" @click="hanldActyes()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import zzxTabs from "@/components/zzx-tabs/zzx-tabs.vue"

	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {

				items: ['活动详情', '干货分享'],
				current: 0,
				postList: [{
					img: '../../static/images/zhen1.jpg',
					name: '潘帅',
					isFload: false,
					text: '散文是一个汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文；三指文体名。散文是一种抒发作者真情实感、散文是一个汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文；三指文体名。散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平'
				}, {
					img: '../../static/images/zhen1.jpg',
					name: '潘帅',
					isFload: false,
					text: '人，这辈子想活得好，就一定得心态好。有些事，不斤斤计较，有些人，不必放在心上，心量大了，能承受的就多了，生活就不那么苦了。心态好，一切都好，心态差，万事皆难，人生下半场，拼的就是一种心态。 02 生命中的痛苦就像是盐的咸味一样，就这么多。'
				}],
				latitude: "", //纬度
				longitude: "", //经度
				isfav: false, // 商品是否收藏
				formData: '', //报名信息
				id: '',
				pageId: "",
				joinList: "", //报名列表
				msgNumber: "", //报名人数
				join: false, // 活动是否报名

				time: "", //当前时间

				act: "", //活动id
				uid: "" //海报id
			}
		},
		onShow(){
		},
		onLoad(option) {
			this.initData();
			console.log(option)
			if (option.address) {
				// let aa = option.address;
				// let bb = decodeURIComponent(aa)
				// this.formData = JSON.parse(bb);
				// console.log(this.formData)
				this.pageId = option.address;
				this.getActivityInfo();
				this.getJoinList()
			}
			if (option.scene) {
				let bb = decodeURIComponent(option.scene)

				let res = {}
				let params = decodeURIComponent(bb).split("&")
				params.forEach(item => {
					let pram = item.split("=")
					res[pram[0]] = pram[1]
				})
				console.log(res)
				console.log("res")

				this.pageId = res.act;
				this.act = res.act;
				this.uid = res.uid;
				this.getActivityInfo();
				this.getJoinList()
			}
			// let userInfo = wx.getStorageSync("userInfo"); 
			// let info = JSON.parse(userInfo);
			// console.log('info',info);
			
			
		},

		methods: {
			//获取用户信息
			initData() {
				if (uni.getStorageSync('accessToken')) {
					this.$http.get('/user/info').then((response) => {
						const res = response.data;
						if (res.code == 0) {
							this.userInfo = res.data;
							uni.setStorageSync('userInfo', JSON.stringify(res.data));
							if(this.userInfo.level===1 || this.userInfo.level===0){
								this.$refs.popuphy.open();
							}
						}
			
					})
				}
			},
			//取消
			hanldActNO(){
				this.$refs.popuphy.close();
			},
			//确定
			hanldActyes(){
				uni.navigateTo({
					url:'/pages/member/membershipCard/membershipCard'
				})
			},
			//已报名
			hanldToRegis() {
				uni.navigateTo({
					url: `/pages/find/registered?id=${this.pageId}`
				});
			},
			//报名
			hanldToapply() {
				let id = this.formData.id;
				console.log(this.act)
				console.log("报名act")
				uni.navigateTo({
					// this.$common.redirectTo('/pages/goods/payment/index?order_id=' + res.data.order_id + '&type=' + this.orderType)

					url: `/pages/find/apply?id=${id}&img=${this.formData.image}&title=${this.formData.title}&subtitle=${this.formData.subtitle}&price=${this.formData.price}&uid=${this.uid}&act=${this.act}&vipPrice=${this.formData.vip_price}`
				});
			},
			//收藏
			hanldCollect(id) {
				const formData = {
					id: id
				}
				this.$http.post('/activity/collect', formData).then((response) => {
					const res = response.data;
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.getActivityInfo()
					}
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				})
			},
			//干货分享详情
			// hanldShareInfo(){
			// 	uni.navigateTo({
			// 		url:'/pages/find/goodsShareInfo'
			// 	})
			// },
			//导航
			hlandMap(item) {
				console.log(item);
				let lat = parseFloat(item.lat);
				let lon = parseFloat(item.long);
				console.log(lat);
				wx.openLocation({
					latitude: lat,
					longitude: lon,
					scale: 18,
					name: item.address
					// address:'民易科技'  
				})
			},
			//打电话
			hanldCall(item) {
				wx.makePhoneCall({
					phoneNumber: item.tel + ''
				});
			},

			//列表
			getActivityInfo() {
				const params = {
					id: this.pageId,
				}

				this.$http.get('/activity/row', {
					params: params
				}).then((response) => {
					const res = response.data;
					console.log(res)
					if (res.code == 0) {
						this.formData = res.data;
						this.isfav = this.formData.collect == null || 0 ? false : true;
						this.join = this.formData.join == null || 0 ? false : true;
						this.time = res.time;
						console.log(this.isfav + 'isfav')
						this.formData.content = this.formData.content.replace(/\<img/gi,
							'<img style="max-width:100%;height:auto;margin:0 auto;width: 100%;display: block;"')
						// this.formData.content = this.formData.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;width: 100%"').replace(/\<p/gi, '<p style="margin:0 20px"')

					} else {}
				})
			},
			//报名列表
			getJoinList() {
				const params = {
					id: this.pageId,
				}
				
				
				
		
				

				this.$http.get('/activity/joinList', {
					params: params
				}).then((response) => {
					const res = response.data;
					console.log(res)
					if (res.code == 0) {
						this.joinList = res.data.data;
						this.msgNumber = res.msg
					} else {}
				})
			},
			dontLogin() {
				this.tokenShow = false
			},
			//授权
			getLogin() {
				// uni.setStorageSync("accessToken", 'dc217c8384b9bd4360d6724227f6b865'); //成功之后存入token
				// console.log('dc217c8384b9bd4360d6724227f6b865')
				var that = this;
				wx.login({
					//获取code 使用wx.login得到的登陆凭证，用于换取openid==token代替
					success(res) {
						if (res.code) {
							console.log(res.code);
							that.code = res.code;
							//使用 wx.getSetting 获取用户当前的授权状态。
							wx.getSetting({
								success(res) {
									if (res.authSetting['scope.userInfo']) { //已授权=>getUserInfo
										wx.getUserInfo({
											success(res) {
												console.log(res)
												console.log("ressss")
												console.log(that.userinfo)

												const formData = {
													code: that.code,
													avatar: res.userInfo.avatarUrl,
													nickname: res.userInfo.nickName
												}
												that.$http.post('/login/wxLogin', formData).then((response) => {
													const res = response.data;
													console.log(res.data.token);
													if (res.data.token) {
														that.$http.setConfig((config) => { /* 设置全局配置 */
															config.header = {
																...config.header,
																token: res.data.token,
															}
															return config
														})
														wx.setStorageSync("accessToken", res.data.token); //成功之后存入token
													}
													that.token = res.data.token;
													that.tokenShow = false;
													uni.showToast({
														title: res.msg,
														icon: 'none'
													});
												})
											},
											fail(err) {
												console.log(err)
											}
										})
									}
								}
							})
						} else {
							console.log("登录失败！" + res.errMsg);
						}
					}
				});
			}
		},
		components: {
			zzxTabs,
			jyfParser,
			uniPopup
		},
		onShareAppMessage() {
			return {
				title: this.formData.title,
				imageUrl: this.formData.atlas[0],
				path: `/pages/find/activityInfo?address=${this.formData.id}`
			}
			// this.$common.navigateTo('/pages/classify/productList?indexId='+indexId+'&title=电器');
			console.log(path)
		}
	}
</script>

<style>
	@import url("../../common/index/index.css");

	.swiper {
		width: 100%;
		overflow: hidden;
		height: 180px;
	}

	.home-wrapper>>>uni-swiper .uni-swiper-wrapper {
		z-index: 99;
	}

	.swiper .img {
		height: 180px;
		width: 100%;
	}

	.acinfo {
		width: 100%;
		background-color: #F7F7F7;
	}

	.acinfo-benner {
		height: 180px;
		width: 100%;
	}

	.acinfo-benner image {
		height: 100%;
		width: 100%;
	}

	.acinfo-header {
		height: 95px;
		background-color: #fff;
		width: 100%;
		padding: 15px 17px 12px 17px;
		position: relative;
	}

	.ac-title {
		color: #333333;
		font-size: 16px;
		font-weight: bold;
	}

	.ac-main {
		font-size: 13px;
		color: #999999;
		font-weight: bold;
	}

	.ac-warapper {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.ac-num {
		display: flex;
		flex-direction: row;
	}

	.num-user {
		width: 76px;
		height: 20px;
		background: rgba(39, 40, 45, 1);
		border-radius: 10px;
		font-size: 12px;
		font-weight: bold;
		color: rgba(248, 219, 73, 1);
		line-height: 20px;
		text-align: center;
		margin: 0 8px;
	}

	.ac-surplus {
		color: #999;
		font-size: 12px;
	}

	.inte {

		background-color: #fff;
		width: 100%;
		margin-top: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 8px 17px;
	}

	.inte-content {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.inte-img {
		width: 9px;
		height: 12px;
	}

	.inte-text {
		width: 33px;
		height: 21px;
		background: rgba(255, 95, 73, 0.1);
		border-radius: 3px;
		color: #FF5F49;
		line-height: 21px;
		text-align: center;
		font-size: 12px;
	}

	.inte-num {
		color: #666666;
		font-size: 13px;
		margin-left: 4px;
	}


	.swich {
		width: 100%;
		padding: 10px 0 111px 0;
	}

	.swi-wrapper {
		background-color: #fff;
		width: 100%;
	}

	.swi-add {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 11px 17px;
		align-items: center;
	}

	.add-con {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.add-con image {
		width: 15px;
		height: 17px;
	}

	.add-text {
		padding-left: 10px;
	}

	.add-but {
		width: 38px;
		height: 21px;
		border-radius: 3px;
		border: 1px solid rgba(66, 111, 182, 1);
		font-size: 12px;
		font-weight: 500;
		color: rgba(66, 111, 182, 1);
		line-height: 19px;
		text-align: center;
	}

	.print {
		background-color: #fff;
		margin-top: 10px;
	}

	.print image {
		/* height: 180px; */
		width: 100%;
	}

	.print-text {
		padding: 7px 0px;
		font-size: 14px;
		color: #333333;
		font-weight: bold;
	}

	.print-main {
		font-size: 14px;
		color: #666666;
		padding: 0px 17px 10px 17px;
	}

	.sig {
		background-color: #fff;
		padding: 8px 17px;
		margin-top: 10px;
	}

	.signup {
		display: flex;
		flex-direction: row;
		font-size: 14px;
		color: #333;
		font-weight: bold;
		justify-content: space-between;
		align-items: center;
	}

	.sig-img {
		display: flex;
		flex-direction: row;
		padding-top: 10px;
	}

	.sig-con {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 14px;
	}

	.sig-con image {
		width: 36px;
		height: 36px;
		border-radius: 50%;
	}

	.ativ-but {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding-bottom: 28px;
		align-items: flex-end;
		padding-left: 17px;
	}

	.ativ-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.ac-once-but {
		width: 188px;
		height: 49px;
		background: rgba(255, 95, 73, 1);
		font-weight: 500;
		line-height: 49px;
		color: #FFFFFF;
		font-size: 16px;
		text-align: center;
	}

	.ac-text {
		color: #999999;
	}

	/*评论*/
	#moments {
		margin-top: 0;
	}

	.liked {
		width: 17px;
		height: 17px;
		border-radius: 50%;
	}

	#moments .moments__post .like {
		width: auto;
		height: auto;
		position: absolute;
		right: 0px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		width: 77px;
		background-color: #F7F7F7;
		border-radius: 4px;
		padding: 10px;
		height: 26px;
		line-height: 26px;
	}

	.uni-input-placeholder {
		font-size: 15px;
		color: #C4C4C4;
	}

	#moments {}

	#moments .moments__post .toolbar image {
		padding-left: 0;
	}

	#moments .moments__post .toolbar {
		justify-content: flex-end;
	}

	.#moments .moments__post .toolbar .timestamp {
		font-size: 13px;
	}

	#moments .moments__post .post_right {
		padding-right: 10px;
	}

	#moments .moments__post .footer_content {
		justify-content: space-between;

	}

	#moments .moments__post {
		border-bottom: 1px solid #ECECEC;
	}

	.moments__post:last-child {
		border-bottom: none !important;
	}

	.dianzan-wrap {
		display: flex;
		flex-direction: row;
		color: #333333;
	}

	.dianzan image {
		width: 17px;
		height: 15px;
		vertical-align: sub;
	}

	.fookname {
		font-size: 14px;
		color: #333333;
		font-weight: bold;
	}

	.post-footer {
		border-radius: 4px;
		padding: 5px;
	}

	.fooftime {
		color: #999;
		font-size: 12px;
	}

	.post-username {
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100px;
		display: block;
	}

	.post-time {
		font-size: 12px;
		color: rgb(153, 153, 153);
		position: absolute;
		right: 20px;
		top: 20px;
	}

	.pos-user-img {
		height: 18px;
		width: 56px;
		vertical-align: sub;
	}

	.zhan {
		color: #426FB6;
	}

	.zhan image {
		width: 13px;
		height: 13px;
		margin-left: 5px;
	}

	.paragraph {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	/**/
	.fenxi {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		position: absolute;
		right: 0;
		top: 20px;
		width: 69px;
		height: 22px;
		background: rgba(247, 247, 247, 1);
		border-radius: 11px 0 0 11px;
		align-items: center;
		justify-content: center;
		color: #999999;
		font-size: 12px;

	}

	.fenxi image {
		width: 13px;
		height: 16px;
	}

	/* .expansion{ */
	/*   white-space:pre-line; */
	/*   width: 100px; */
	/*   overflow: hidden; */
	/*   -webkit-line-clamp: 4; */
	/*   text-overflow: ellipsis; */
	/*   display: -webkit-box; */
	/*   -webkit-box-orient: vertical; */
	/*   } */
	.wrap {
		display: flex;
		font-size: 26upx;
		justify-content: space-between;
		margin: 0 auto;
	}

	.fload {
		height: auto;
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		/* 要显示多少行就改变line-clamp的数据,此处折叠起来显示一行*/
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.hide {
		display: -webkit-box;
	}

	.show {
		display: block;
	}

	.gan {
		background-color: #FFFFFF;
		margin-top: 10px;
	}

	.gan-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 10px 17px 0 17px;
	}

	.gan-title image {
		width: 10px;
		height: 13px;
	}

	.wrap-img {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.wrap-img image {
		width: 180upx;
		height: 180upx;
		margin-left: 5px;
	}

	.title-info {
		padding: 10px 17px;
		background-color: #FFFFFF;
		border-bottom: 1px solid #F5F5F5;
		color: #333333;
		font-weight: bold;
		font-size: 14px;
	}

	.activ-share-but {
		background: none;
		display: flex;
		flex-direction: column;
		line-height: 28px;
		align-items: center;
		justify-content: center;
		line-height: inherit;
	}
/**/
	.huany {
		background-color: #fff;
		height: 200px;
		width: 300px;
		border-radius: 5px;
		color: #333333;
		font-size: 14px;
		position: relative;
	}

	.but-huany {
		display: flex;
		flex-direction: row;
		height: 44px;
		font-size: 14px;
		line-height: 44px;
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.but-qu {
		background-color: #DBDBDB;
		width: 50%;
		line-height: 44px;
		text-align: center;
	}

	.but-ok {
		background-color: #FF5F49;
		width: 50%;
		line-height: 44px;
		text-align: center;
		color: #FFFFFF;
	}
</style>
